<template>
  <div class="video-container">
    <van-swipe class="video-swipe" :show-indicators="false" vertical @change="onSwipeChange">
      <van-swipe-item v-for="video in hotVideoList" :key="video._id">
        <div class="video-item">
          <VideoPlayer
            class="video-player"
            ref="currentPlayer"
            :videoId="video.vodId"
            :videoUrl="video.vodURL"
            :autoplay="true"
            :controls="false"
            :loop="true"
            :muted="muted"
            @ready="handlePlayerReady(video._id)"
            @error="handlePlayerError(video._id)"
          />
          <div class="video-controls">
            <div class="controls-item">
              <!-- 静音切换按钮 -->
              <van-icon name="volume-o" size="24" @click="toggleMute" />
            </div>
          </div>
          <div class="video-info">
            <div class="author">
              <van-image round width="40" height="40" :src="video.user.avatar" />
              <span class="username">{{ video.user.username }}</span>
            </div>
            <div class="title">{{ video.title }}</div>
            <div class="description">{{ video.description }}</div>
            <div class="actions">
              <div class="action-item" @click="handleLikeClick" v-if="!isLike">
                <van-icon name="like-o" size="24" />
                <span>{{ video.likeCount }}</span>
              </div>
              <div class="action-item" @click="handleLikeClick" v-else>
                <van-icon name="like" color="#ff0000" size="24" />
                <span>{{ video.likeCount }}</span>
              </div>
              <div class="action-item" @click="handleCommentClick">
                <van-icon name="comment-o" size="24" />
                <span>{{ video.commentCount }}</span>
              </div>
              <div class="action-item">
                <van-icon name="share-o" size="24" />
                <span>分享</span>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { videoApi } from '@/api/video'
import VideoPlayer from '@/components/VideoPlayer.vue'

const hotVideoList = ref([])
// 播放器实例
const currentPlayer = ref(null)
// 播放器索引
const currentIndex = ref(0)
// 静音
const muted = ref(true)

const videoInfo = ref({})
const coverUrl = ref('')
const vodUrl = ref('')
const isLike = ref(false)
const isFollow = ref(false)

// 获取视频列表
const getHotVideoList = async () => {
  const res = await videoApi.getHotVideoList()
  hotVideoList.value = res.videos
}
// 获取视频详情
const getVideoDetail = async (videoId) => {
  const res = await videoApi.getVideoDetail(videoId)
  videoInfo.value = res.video
  console.log(videoInfo.value)
  isLike.value = res.isLike
  isFollow.value = res.isFollow
}
// 获取vod视频信息
const getPlayInfo = async (vodId) => {
  const res = await videoApi.getPalyInfo(vodId)
  coverUrl.value = res.VideoBase.CoverURL
  vodUrl.value = res.PlayInfoList.PlayInfo[0].PlayURL
  console.log(coverUrl.value, vodUrl.value)
}

// 播放器就绪
const handlePlayerReady = (videoId) => {
  console.log('播放器就绪:', videoId)
}

// 播放器错误
const handlePlayerError = (videoId) => {
  console.error('播放器错误:', videoId)
}

// 切换视频
const onSwipeChange = (index) => {
  console.log(index)
  // 暂停其他视频
  if (currentPlayer.value) {
    currentPlayer.value.map((item) => {
      item.pause()
    })
  }

  // 播放当前视频
  currentPlayer.value[index].play()
}
// 切换静音
const toggleMute = () => {
  muted.value = !muted.value
}
// 点赞
const handleLikeClick = async () => {
  try {
    await videoApi.likeVideo(hotVideoList.value[currentIndex.value]._id)
    hotVideoList.value[currentIndex.value].likeCount++
  } catch (error) {
    console.error('点赞失败：', error)
  }
}
const handleCommentClick = () => {}
onMounted(async () => {
  await getHotVideoList()
  // getPlayInfo(hotVideoList.value[currentIndex.value].vodId)
  getVideoDetail(hotVideoList.value[currentIndex.value]._id)
})
</script>

<style scoped>
.video-container {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.video-swipe {
  height: 100%;
}

.video-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-controls {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  color: #fff;
}

.video-info {
  position: absolute;
  bottom: 60px;
  left: 12px;
  right: 12px;
  color: #fff;
  z-index: 1;
}

.author {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.username {
  margin-left: 8px;
  font-size: var(--font-size-base);
  font-weight: bold;
}

.description {
  font-size: var(--font-size-small);
}

.actions {
  position: absolute;
  right: 8px;
  bottom: 0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.action-item span {
  margin-top: 4px;
  font-size: 12px;
}
</style>
